<!DOCTYPE html>
<!-- saved from url=(0076)http://yth.0101data.cn/course-orginal/cse5a0e5af7a7f3a9-93397175/contributed -->
<html>
	<!-- Mirrored from clear.lcrm.in/dark/layout_fixed.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 May 2017 07:54:24 GMT -->

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>每一次的授课计划的签到统计</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->

		<link rel="stylesheet" href="css/site.completed.min.css" />
		<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
		<link rel="stylesheet" href="css/toastr.min.css" />
		<link rel="stylesheet" href="css/select2.min.css" />
		<link rel="stylesheet" href="css/cbvm.app.css" />

		<!--end page level css-->
		<!-- global js -->
		<script type="text/javascript" src="js/jquery.3.js"></script>
		<!--放在最前面-->
		<script type="text/javascript" src="js/site.completed.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="js/select2.min.js"></script>
		<script type="text/javascript" src="js/toastr.js"></script>
		<script type="text/javascript" src="js/cbvm.app.js"></script>
		<script type="text/javascript" src="js/pnotify.custom.min.js"></script>
		<!--
      	作者：864478199@qq.com
      	时间：2018-03-21
      	描述：样式
      -->
		<link rel="stylesheet" href="css/layui.css" />
		<link rel="stylesheet" href="mystyle.css" />
		<!--
        	作者：864478199@qq.com
        	时间：2018-04-02
        	描述：js
        -->
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>

	<!-- 模块拼接js -->
	<script type="text/javascript">
		$(document).ready(function() {
			$('.header').load("header.html");
			$('.left').load("left.html");
		})
	</script>

	<body class="skin-default fixed-menu">
		<!-- 外部头部拼接 -->
		<div class="header"></div>

		<div class="wrapper row-offcanvas row-offcanvas-left">
			<!-- Left side column. contains the logo and sidebar -->
			<aside class="left-side sidebar-offcanvas">
				<!-- sidebar: style can be found in sidebar-->
				<div class="left"></div>
				<!-- /.sidebar -->
			</aside>
			<aside class="right-side fixednav_right">
				<section class="content-header">
					<!--
              	作者：864478199@qq.com
              	时间：2018-03-26
              	描述：修改面包屑
              -->

					<ol class="breadcrumb">
						<li>
							<a href="http://yth.0101data.cn/">
								<i class="fa fa-fw ti-home"></i> 首页
							</a>
						</li>
						<li class="active">
							<a href="#">我的课程面板</a>
						</li>
						<li class="active">
							<a href="#">授课计划管理</a>
						</li>
						<li class="active">
							签到统计
						</li>
					</ol>
					<h1>
			        签到统计
			    </h1>
				</section>
				<section class="content">
					<!-- second table start -->
					<div class="row">
						<div class="col-lg-12">
							<div class="panel ervery-sign-count">
								<div class="layui-row">
									<div class="right-title layui-col-sm6">授课计划1
										<div class="count">准点：<span>42</span>人，旷课：<span>1</span>人，迟到：<span>2</span>人，请假：<span>2</span>人</div>
									</div>
									<div class="layui-col-sm6 tab-btns">
										<div class="layui-btn-group">
											<button class="layui-btn layui-btn-primary layui-btn-sm active">全部</button>
											<button class="layui-btn layui-btn-primary layui-btn-sm">准点</button>
											<button class="layui-btn layui-btn-primary layui-btn-sm">旷课</button>
											<button class="layui-btn layui-btn-primary layui-btn-sm">迟到</button>
											<button class="layui-btn layui-btn-primary layui-btn-sm">请假</button>
										</div>
									</div>
								</div>
								<div class="ervery-sign-list">
									<table class="layui-table" lay-skin="line">
										<colgroup>
											<col width="130">
											<col width="200">
											<col width="220">
											<col width="220">
										</colgroup>
										<thead>
											<tr>
												<th>组名</th>
												<th>姓名</th>
												<th>签到状态</th>
												<th>签到时间</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>团队1</td>
												<td>林晓辉<span class="leader">组长</span></td>
												<td><img src="img/zhundian.png" alt="前端状态图标" /></td>
												<td>08:15</td>
											</tr>
											<tr>
												<td></td>
												<td>陈欣</td>
												<td><img src="img/chidao.png" alt="前端状态图标" /></td>
												<td>08:35</td>
											</tr>
											<tr>
												<td></td>
												<td>温锋</td>
												<td><img src="img/kuangke.png" alt="前端状态图标" /></td>
												<td>--</td>
											</tr>
											<tr>
												<td>团队2</td>
												<td>温韬<span class="leader">组长</span></td>
												<td>
													<div id='divselect'>
														<cite><img src="img/kuangke.png" alt="前端状态图标"/>旷课<i class="layui-icon">&#xe61a;</i> </cite>
														<div class="ul-option">
															<ul>
																<li>
																	<a href="javascript:;" selectid='1'><img src="img/zhundian.png" />准点</a>
																</li>
																<li>
																	<a href="javascript:;" selectid='2'><img src="img/kuangke.png" />旷课</a>
																</li>
																<li>
																	<a href="javascript:;" selectid='3'><img src="img/chidao.png" />迟到</a>
																</li>
																<li>
																	<a href="javascript:;" selectid='4'><img src="img/qingjia.png" />请假</a>
																</li>
															</ul>
														</div>
													</div>
													<input name="" type="hidden" value="" id="inputselect" />
												</td>
												<td>--</td>
											</tr>
											<tr>
												<td></td>
												<td>温世涛</td>
												<td><img src="img/qingjia.png" alt="前端状态图标" /></td>
												<td>--</td>
											</tr>
											<tr>
												<td></td>
												<td>温锋</td>
												<td><img src="img/kuangke.png" alt="前端状态图标" /></td>
												<td>--</td>
											</tr>
										</tbody>
									</table>
									<div class="sign-legend">
										<img src="img/zhundian.png" />准点</a>
										<img src="img/kuangke.png" />旷课</a>
										<img src="img/chidao.png" />迟到</a>
										<img src="img/qingjia.png" />请假</a>
									</div>
									<div id="page" class="page"></div>
								</div>
							</div>
							<!--
            	作者：864478199@qq.com
            	时间：2018-03-26
            	描述：底部
            -->
							<div class="login-footer2">
								<span>厦门理工学院 &copy; 2018</span>
							</div>
						</div>
					</div>
				</section>
			</aside>
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['laypage', 'layer'], function() {
			var laypage = layui.laypage;
			laypage.render({
				elem: 'page',
				count: 70,
				layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
				jump: function(obj) {
					console.log(obj)
				}
			});
		});
	</script>
	<!--option-->
	<script type="text/javascript">
		jQuery.divselect = function(divselectid, inputselectid) {
			var inputselect = $(inputselectid);
			$(divselectid + " cite").click(function() {
				var ul = $(divselectid + " ul");
				if(ul.css("display") == "none") {
					ul.slideDown("fast");
					$(divselectid + " cite i").html('&#xe619;');
				} else {
					ul.slideUp("fast");
					$(divselectid + " cite i").html('&#xe61a;');
				}
			});
			$(divselectid + " ul li a").click(function() {
				var imgsrc = $(this).find('img').attr('src');
				var txt = $(this).text();
				var txts = '<img src="' + imgsrc + '"/>' + txt + '<i class="layui-icon">&#xe61a;</i>';
				$(divselectid + " cite").html(txts);
				var value = $(this).attr("selectid");
				inputselect.val(value);
				$(divselectid + " ul").hide();
			});
		};
	</script>
	<!--div模拟下拉菜单(select)jquery插件调用方法如下：-->
	<script type="text/javascript">
		$(function() {
			$.divselect("#divselect", "#inputselect");
		});
	</script>

</html>